import { Navigate } from "react-router-dom";
import { lazy, Suspense } from "react";
const Home = lazy(() => import("../views/Home/index.jsx"));
const Login = lazy(() => import("../views/Login/index.jsx"));
const Lianmeng = lazy(() => import("../views/Lianmeng/index.jsx"));
const Feiche = lazy(() => import("../views/Feiche/index.jsx"));
const Taobao = lazy(() => import("../views/Taobao/index.jsx"));
const Jingdong = lazy(() => import("../views/Jingdong/index.jsx"));
const Pinduoduo = lazy(() => import("../views/Pinduoduo/index.jsx"));
const Baidu = lazy(() => import("../views/Baidu/index.jsx"));
const Tenxun = lazy(() => import("../views/Tenxun/index.jsx"));
const NoFand = lazy(() => import("../views/404/index.jsx"));
// 路由懒加载的组件需要使用 Suspense组件包裹，并在组件上添加fallback方法
function WithLoading(element: JSX.Element) {
  return <Suspense fallback={<h1>Loading...</h1>}>{element}</Suspense>;
}
const routes = [
  { path: "/", element: <Navigate to="/login"></Navigate> },
  { path: "*", element: <Navigate to="/404"></Navigate> },
  {
    path: "/404",
    element: <NoFand></NoFand>,
  },
  {
    path: "/login",
    element: WithLoading(<Login></Login>),
  },
  {
    path: "/home",
    element: <Navigate to="feiche"></Navigate>,
  },
  {
    path: "/home",
    element: WithLoading(<Home></Home>),
    children: [
      {
        path: "/home/lianmeng",
        element: WithLoading(<Lianmeng></Lianmeng>),
      },
      {
        path: "/home/feiche",
        element: WithLoading(<Feiche></Feiche>),
      },
      {
        path: "/home/jingdong",
        element: WithLoading(<Jingdong></Jingdong>),
      },
      {
        path: "/home/taobao",
        element: WithLoading(<Taobao></Taobao>),
      },
      {
        path: "/home/pinduoduo",
        element: WithLoading(<Pinduoduo></Pinduoduo>),
      },
      {
        path: "/home/baidu",
        element: WithLoading(<Baidu></Baidu>),
      },
      {
        path: "/home/tenxun",
        element: WithLoading(<Tenxun></Tenxun>),
      },
    ],
  },
];
export default routes;
